<script setup lang="ts">
import { reactive, watch } from 'vue';

defineOptions({
  name: 'ShowDetailModal'
});

interface Props {
  /** the detail of row data */
  rowData?: Api.SystemManage.Log | null;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

function closeModal() {
  visible.value = false;
}

type Model = Pick<
  Api.SystemManage.Log,
  'id' | 'userId' | 'ip' | 'methodName' | 'requestMethod' | 'requestUrl' | 'description' | 'params' | 'requestTime'
>;

const model: Model = reactive(createDefaultModel());

function createDefaultModel(): Model {
  return {
    id: 0,
    userId: '',
    ip: '',
    methodName: '',
    requestMethod: '',
    requestUrl: '',
    description: '',
    params: '',
    requestTime: ''
  };
}

function handleInitModel() {
  // 属性拷贝
  Object.assign(model, props.rowData);
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel();
  }
});
</script>

<template>
  <NModal v-model:show="visible" title="日志信息详情" preset="card" class="h-500px w-800px" @close="closeModal">
    <JsonViewer :value="model" copyable boxed expanded />
  </NModal>
</template>

<style scoped></style>
